@import '../style/var';


.van-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;

  // hack for avoid max-width when use left & fixed
  width: @toast-default-width;
  max-width: @toast-max-width;
  min-height: @toast-default-min-height;
  padding: @toast-default-padding;
  color: @toast-text-color;
  font-size: @toast-font-size;
  line-height: @toast-line-height;

  // allow newline character
  white-space: pre-wrap;
  text-align: center;
  // https://github.com/youzan/vant/issues/8959
  word-break: break-all;
  background-color: @toast-background-color;
  border-radius: @toast-border-radius;
  transform: translate3d(-50%, -50%, 0);

  &--unclickable {
    // lock scroll
    overflow: hidden;

    // should not add pointer-events: none directly to body tag
    // that will cause unexpected tap-highlight-color in mobile safari
    * {
      pointer-events: none;
    }
  }

  &--text,
  &--html {
    width: fit-content;
    min-width: @toast-text-min-width;
    min-height: 0;
    padding: @toast-text-padding;

    .van-toast__text {
      margin-top: 0;
    }
  }

  &--top {
    top: @toast-position-top-distance;
  }

  &--bottom {
    top: auto;
    bottom: @toast-position-bottom-distance;
  }

  &__icon {
    font-size: @toast-icon-size;
  }

  &__loading {
    padding: @padding-base;
    color: @toast-loading-icon-color;
  }

  &__text {
    margin-top: @padding-xs;
  }
}

.van-toast-designer {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;

  // hack for avoid max-width when use left & fixed
  width: @toast-default-width;
  max-width: @toast-max-width;
  min-height: @toast-default-min-height;
  padding: @toast-default-padding;
  color: @toast-text-color;
  font-size: @toast-font-size;
  line-height: @toast-line-height;

  // allow newline character
  white-space: pre-wrap;
  text-align: center;
  // https://github.com/youzan/vant/issues/8959
  word-break: break-all;
  background-color: @toast-background-color;
  border-radius: @toast-border-radius;
  transform: translate3d(-50%, -50%, 0);

  &--unclickable {
    // lock scroll
    overflow: hidden;

    // should not add pointer-events: none directly to body tag
    // that will cause unexpected tap-highlight-color in mobile safari
    * {
      pointer-events: none;
    }
  }

  &--text,
  &--html {
    width: fit-content;
    min-width: @toast-text-min-width;
    min-height: 0;
    padding: @toast-text-padding;

    .van-toast__text {
      margin-top: 0;
    }
  }

  &--top {
    top: @toast-position-top-distance;
  }

  &--bottom {
    top: auto;
    bottom: @toast-position-bottom-distance;
  }

  &__icon {
    font-size: @toast-icon-size;
  }

  &__custom-icon {
    font-size: @toast-icon-size;
    color: var(--van-toast-custom-icon-color);
  }

  &__loading {
    padding: @padding-base;
    color: @toast-loading-icon-color;
  }

  &__text {
    margin-top: @padding-xs;
  }
}

.van-toast-group {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  pointer-events: none;


  &__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: content-box;

    &+&{
      margin-top: 12px;
    }


    // hack for avoid max-width when use left & fixed
    width: @toast-default-width;
    max-width: @toast-max-width;
    min-height: @toast-default-min-height;
    padding: @toast-default-padding;
    color: @toast-text-color;
    font-size: @toast-font-size;
    line-height: @toast-line-height;

    // allow newline character
    white-space: pre-wrap;
    text-align: center;
    // https://github.com/youzan/vant/issues/8959
    word-break: break-all;
    background-color: @toast-background-color;
    border-radius: @toast-border-radius;
    // 阴影
    box-shadow: @toast-box-shadow;


    &--unclickable {
      // lock scroll
      overflow: hidden;

      // should not add pointer-events: none directly to body tag
      // that will cause unexpected tap-highlight-color in mobile safari
      * {
        pointer-events: none;
      }
    }

    &--text,
    &--html {
      width: fit-content;
      min-width: @toast-text-min-width;
      min-height: 0;
      padding: @toast-text-padding;

      .van-toast-group__item__text {
        margin-top: 0;
      }
    }

    &--top {
      top: @toast-position-top-distance;
    }

    &--bottom {
      top: auto;
      bottom: @toast-position-bottom-distance;
    }

    &__icon {
      font-size: @toast-icon-size;
    }

    &__custom-icon {
      font-size: @toast-icon-size;
      color: var(--van-toast-custom-icon-color);
    }

    &__loading {
      padding: @padding-base;
      color: @toast-loading-icon-color;
    }

    &__text {
      margin-top: @padding-xs;
    }
  }
}

//below for animate

:root {
  --animate-duration: 0.4s;
}


.animate__animated {
-webkit-animation-duration: 1s;
-webkit-animation-duration: var(--animate-duration);
animation-duration: 1s;
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--transition-duration-base);
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-fast-enter-active,
.fade-fast-leave-active {
  transition: opacity var(--transition-duration-fast);
}

.fade-fast-enter,
.fade-fast-leave-to {
  opacity: 0;
}

.animate__move {
  transition: transform var(--animate-duration);
}

.animate__list-leave-active {
  position: absolute;
  min-width: 88px;
  min-height: 88px;
}

.animate__list-leave-active.van-toast-group__item--text{
  // min-width: unset;
  min-height: unset;
}

/* Fading entrances  */
@keyframes fadeInDownSmall {
  from {
      transform: translate3d(0, -50%, 0);
      opacity: 0;
  }

  to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

.animate__fadeInDownSmall {
  animation-name: fadeInDownSmall;
}

@keyframes fadeInLeftSmall {
  from {
      transform: translate3d(-50%, 0, 0);
      opacity: 0;
  }

  to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

.animate__fadeInLeftSmall {
  animation-name: fadeInLeftSmall;
}

@keyframes fadeInRight {
  from {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
  }

  to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

.animate__fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRightSmall {
  from {
      transform: translate3d(50%, 0, 0);
      opacity: 0;
  }

  to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

.animate__fadeInRightSmall {
  animation-name: fadeInRightSmall;
}

@keyframes fadeInUpSmall {
  from {
      transform: translate3d(0, 50%, 0);
      opacity: 0;
  }

  to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
  }
}

.animate__fadeInUpSmall {
  animation-name: fadeInUpSmall;
}

@keyframes fadeOutDownSmall {
  from {
      opacity: 1;
  }

  to {
      transform: translate3d(0, 50%, 0);
      opacity: 0;
  }
}

.animate__fadeOutDownSmall {
  animation-name: fadeOutDownSmall;
}

@keyframes fadeOutLeftSmall {
  from {
      opacity: 1;
  }

  to {
      transform: translate3d(-50%, 0, 0);
      opacity: 0;
  }
}

.animate__fadeOutLeftSmall {
  animation-name: fadeOutLeftSmall;
}

@keyframes fadeOutRightSmall {
  from {
      opacity: 1;
  }

  to {
      transform: translate3d(50%, 0, 0);
      opacity: 0;
  }
}

.animate__fadeOutRightSmall {
  animation-name: fadeOutRightSmall;
}

@keyframes fadeOutUpSmall {
  from {
      opacity: 1;
  }

  to {
      transform: translate3d(0, -50%, 0);
      opacity: 0;
  }
}

.animate__fadeOutUpSmall {
  animation-name: fadeOutUpSmall;
}
